<template>
    <div class="app-button" @click="$emit('click')" :class="[{block: block}, {disable: disable}]" :style="{background: bg}">
        <img v-if="icon" :src="icon">
        <slot></slot>
    </div>
</template>

<script>
    export default {
        name: "AppButton",
        props: {
            block: {
                type: Boolean,
                default: false
            },
            bg: {
                type: String,
                default: '#f80'
            },
            icon: {
                default: ''
            },
            disable: {
                default: false,
                type: Boolean
            }
        }
    }
</script>

<style lang="scss" scoped>
    .app-button {
        display: inline-block;
        height: 40/3.75+vw;
        line-height: 40/3.75+vw;
        color: #fff;
        background: #f80;
        padding: 0 15/3.75+vw;
        border-radius: 50/3.75+vw;
        text-align: center;
        vertical-align: middle;
        & + .app-button {
            margin-left: 10/3.75+vw;
            margin-top: 0;
        }
        &.block {
            display: block;
            width: 100%;
            height: 50/3.75+vw;
            line-height: 50/3.75+vw;
            font-size: 19/3.75+vw;
            & + .app-button.block {
                margin-top: 30/3.75+vw;
                margin-left: 0;
            }
        }
        &.disable {
            opacity: 0.6;
            pointer-events: none;
        }
        img {
            width: 30/3.75+vw;
            height: 30/3.75+vw;
            vertical-align: middle;
            margin-right: 10/3.75+vw;
        }
    }
</style>
